<template>
	<view>
		<custom title="动态通知" mode="2" fixed="fixed"></custom>
		<template>
			<view style="padding: 0 30rpx;width: 50%;">
				<tabs3 @change="tab_change" :list="tab_list" :ReadCount='ReadCount' height="100rpx"></tabs3>
			</view>
			<!-- <view style="overflow-y: auto;height: 1100rpx;box-shadow: 0 0 8rpx #f3f3f3;margin: 20rpx 30rpx;
			border-radius: 10rpx;padding-top: 20rpx;">
				<dynamicsitem :isDetail='false' :tabindex="tab_index" @delteOne="delteOne" :showMore="true"
					v-for="(item, i) in list" :key="i" :info="item" @refresh="refresh"></dynamicsitem>
				<qq-footer :list="list" :show="true"></qq-footer>
			</view> -->
			
			<scroll-view scroll-y style="height: 1100rpx;box-shadow: 0 0 8rpx #f3f3f3;width: 93%;margin: 20rpx auto;
			border-radius: 10rpx;padding-top: 20rpx;" @scrolltolower="onScrollToLower" refresher-enabled
				:refresher-triggered="isRefresh" @refresherrefresh="onscrollRefresh">
				<dynamicsitem :isDetail='false' :tabindex="tab_index" @delteOne="delteOne" :showMore="true"
					v-for="(item, i) in list" :key="i" :info="item" @refresh="refresh"></dynamicsitem>
				<qq-footer :list="list" :show="true"></qq-footer>
			</scroll-view>
			
			
			
			
			
		</template>
		<fixed-line></fixed-line>
	</view>
</template>

<script>
	import dynamicsitem from './dynamicsitem.vue';
	import {
		timestampToTime
	} from '../../pages/course/utils'
	import {
		getnoticeList,
		getFriendCircleDetail
	} from './api/friendCircle'
	export default {
		components: {
			dynamicsitem,
		},
		data() {
			return {
				tab_list: [{
						name: '全部'
					},
					{
						name: '评论'
					},
					{
						name: '点赞'
					},
				],
				tab_index: 0,
				list: [],
				pageNumber: 1,
				is_null: false,
				first_request: true,
				hideArr: [],
				GXH: true,
				ReadCount: 0,
				hasTriggered: false, // 用来标记事件是否已经触发过
				isRefresh:false,
			}
		},
		onLoad() {
			this.getunReadCount()
			this.init();
			uni.$on('refresh', this.init)
			uni.$on('updateDetail', (id) => {
				this.refresh({
					id
				})
			})
			// this.getList()
			this.hideArr = uni.getStorageSync('hideArr') || [];
		},
		onShow() {
			let gxh = uni.getStorageSync('GXH');
			if (gxh !== '') {
				this.GXH = gxh;
			}
		},
		onUnload() {
			this.getreadAll()//页面退出-全部已读
			uni.$off('refresh')
			uni.$off('updateDetail')
		},
		onPullDownRefresh() {
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 200);
			this.init();
		},
		onReachBottom() {
			this.getList(this.pageNumber);
		},
		methods: {
			// 滑动到底部时加载更多
			onScrollToLower() {
				this.getList(this.pageNumber);
			},
			onscrollRefresh() {
				this.isRefresh = true;
				setTimeout(() => {
					this.init();
					this.isRefresh = false;
				}, 200);
			},
			getunReadCount() {
				this.request({
					url: '/friendCircleNotice/unReadCount',
				}).then(res => {
					if (!this.rsuccess(res)) return;
					this.ReadCount = res.data

				});
			},
			// getread() {
			// 	this.request({
			// 		url: '/friendCircleNotice/read',
			// 		data: {
			// 			noticeId: this.noticeId
			// 		}
			// 	}).then(res => {
			// 		if (!this.rsuccess(res)) return;
			// 		console.log('已读', res)

			// 	});
			// },
			getreadAll() {
				this.request({
					url: '/friendCircleNotice/readAll',
				}).then(res => {
					if (!this.rsuccess(res)) return;
					console.log('全部已读', res)

				});
			},
			tab_change(index) {
				this.tab_index = index;
				console.log('tab', this.tab_index)

				this.is_null = false;
				// this.getList();
				this.init();
				
				//TAB变化，全部已读
				if (!this.hasTriggered) {
					this.getreadAll()
					this.ReadCount = 0
					this.hasTriggered = true;
				}
			},

			// 更新单条朋友圈数据
			async refresh({
				id
			}) {
				const {
					data
				} = await getFriendCircleDetail({
					id
				})
				this.list = this.list.map(item => {
					if (item.id == id) {
						item = {
							...item,
							isLike: data.isLike,
							likeNames: data.likeNames,
							commentDtos: data.commentDtos
						}
					}
					return item
				})
			},
			init() {
				this.setData({
					list: [],
					pageNumber: 1,
					is_null: false,
				});
				this.getList();
				console.log('initxxxxxxxxxxxxxxxxxxxxx')
			},
			async getList(pageNumber = 1) {
				if (this.is_null) {
					return;
				}
				let noticeTypes = []
				if (this.tab_index == 1) {
					noticeTypes = [2, 3]
				}
				if (this.tab_index == 2) {
					noticeTypes = [1]
				}
				let info = {
					pageNumber,
					pageSize: 10,
					noticeTypes: noticeTypes, //点赞1，评论2.3
					// isRead: '', //已读 0 未读
				};
				const {
					data,
					status
				} = await getnoticeList(info);
				this.first_request = false;
				if (status == 200) {
					if (data && data.list.length > 0) {
						let list = data.list.map(item => {
							item.userInfo = {
								avatarUrl: item.avatarUrl,
								name: item.remark,
								time: timestampToTime(item.createTime, 'Mm')
							}
							return item
						})
						// this.list = list;
						this.list = this.list.concat(list);
					}
					if (data.list.length < 10) {
						this.is_null = true;
					} else {
						this.pageNumber++;
					}
				}
			},
			delteOne(id) {
				this.hideArr.push(id);
				// this.list = this.list.filter(val => val.id != id);
				this.list = this.list
				uni.setStorage({
					key: 'hideArr',
					data: this.hideArr
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;

	}
</style>